<template>
    <div id="register">
        <div class="header_title">
            <el-page-header @back="goBack" content="注册">
            </el-page-header>
        </div>
        <div class="con">
            <h4>用户名</h4>
            <el-input v-model="username" placeholder="请输入内容" @keyup.enter.native="onRegister"></el-input>
            <h4>密码</h4>
            <el-input v-model="password" placeholder="请输入密码" @keyup.enter.native="onRegister"  show-password></el-input>
            <h4>确认密码</h4>
            <el-input v-model="npassword" placeholder="请确认密码" @keyup.enter.native="onRegister"  show-password></el-input>
            <el-button class="submit" @click="onRegister">注册</el-button>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    import { Message } from 'element-ui'
    export default{
        data () {
            return {
                username:'',
                password:'',
                npassword:''
            }
        },
        methods:{
            ...mapActions(['register']),
            onRegister(){
                console.log(this.npassword,this.password)
                if(this.npassword!==this.password){
                    Message.error('请确认密码一致')
                    return;
                }
                this.register({username:this.username,password:this.password}).then(()=>{
                    this.$router.push({path:'/'})
                })
            },
            goBack() {
                this.$router.push({path:'/'})
            } 
        }
    }
</script>
<style src="./register.less" lang="less"></style>
